import { companyApi, CompanyCard, CompanyCardLoader, CompanyReviewsList } from '@/entities/company';
import { CourseCard, CourseCardLoader, productApi } from '@/entities/course';
import { BackButton } from '@/features/BackButton';
import { innerUrls } from '@/shared/constants';
import { PageBlock } from '@/shared/interfaces';
import { CompanyDto, ListCourseDto } from '@/shared/interfaces/generated';
import { transformArrayIntoObject } from '@/shared/lib';
import { makeMockArray } from '@/shared/lib/transformArrayIntoObject';
import { Block, Grid } from '@/shared/ui';
import { useRouter } from 'next/router';

import cs from './Company.module.scss';
import { TeamList } from './ui/TeamList';

const AboutConfig = ({ courses, company }: { courses?: ListCourseDto; company?: CompanyDto }) => (
  <div>
    <BackButton className={cs.mobile} defaultBackLink={innerUrls.catalog} />
    <h1 className={cs.main_title}>Компания</h1>
    {!company ? (
      <CompanyCardLoader />
    ) : (
      <CompanyCard
        amount={courses?.courses.length}
        description={company.description}
        image={company.logo}
        title={company.title}
      />
    )}
  </div>
);

export const useCompanyBlocks = (): PageBlock[] => {
  const router = useRouter();
  const id = router.query.id as string;
  const { data: reviews, isLoading } = companyApi.useGetCompanyRatingsQuery(id, { skip: !id });
  const { data: company } = companyApi.useGetCompanyQuery(id, { skip: !id });
  const { data: staff, isLoading: isStaffLoading } = companyApi.useGetCompanyStaffQuery(id || '', { skip: !id });

  const { data: courses } = productApi.useGetProductsQuery(
    {
      'filters[companyId]': +id,
    },
    { skip: !id },
  );
  return [
    {
      id: 'about',
      title: 'О компании',
      body: <AboutConfig company={company} courses={courses} />,
    },
    {
      id: 'team',
      title: <>Команда {!!staff?.staff.length && <span className={cs.sub}>{staff?.staff.length}</span>}</>,
      body: staff?.staff?.length ? (
        <Block body={<TeamList isLoading={isStaffLoading} staff={staff?.staff} />} title="Команда" />
      ) : undefined,
    },
    {
      id: 'reviews',
      title: (
        <>
          Отзывы <span className={cs.sub}>{reviews?.ratings?.length}</span>
        </>
      ),
      body: <CompanyReviewsList isLoading={isLoading} reviews={reviews} />,
    },
    {
      id: 'materials',
      title: <>Материалы {!!courses?.courses.length && <span className={cs.sub}>{courses?.courses.length}</span>}</>,
      body: (
        <Block
          body={
            <Grid size="l">
              {courses
                ? courses.courses.map(({ id, product }, index) => (
                    <div className={cs.card} key={id}>
                      <CourseCard
                        discount={product?.discount}
                        discountPrice={product?.discountPrice}
                        id={id}
                        image={product?.image}
                        isAdvertising={product?.superOrder > 0}
                        price={product?.price}
                        priority={index < 5}
                        rate={product?.averageRate as unknown as number}
                        title={product?.title}
                      />
                    </div>
                  ))
                : makeMockArray(10).map(({ id }) => <CourseCardLoader key={id} />)}
            </Grid>
          }
          title={
            <>
              Материалы {!!courses?.courses.length && <span className={cs.sub_title}>{courses?.courses.length}</span>}
            </>
          }
        />
      ),
    },
  ];
};
